<template>
  <div id="wangEditor">
    <div id="edit"></div>
  </div>

</template>

<script>
import wangEditor from 'wangeditor'

export default {
  name: 'RichText',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      editor: null,
      editorData: ''
    }
  },
  methods: {
    getEditorData() {
      // 通过代码获取编辑器内容
      let data = this.editor.txt.html()
      alert(data)
      this.$emit("change",data)
    }
  },
  mounted() {
    this.editor = new wangEditor('#edit')
    this.editor.txt.html(this.value)
    this.editor.config.onchange = (newHtml) => {
      this.editorData = newHtml
      this.$emit("change",newHtml)
    }
    this.editor.create()
  },
  beforeDestroy() {
    // 调用销毁 API 对当前编辑器实例进行销毁
    this.editor.destroy()
    this.editor = null
  }
}
</script>

<style scoped>

</style>